<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>H5 + base64</title>
  </head>
  <body>
    <h2>HTML Forms</h2>
    <div>
      <label for="file">file:</label> <br />
      <input type="file" id="file" name="file" /><br /><br />
      <input type="submit" value="Submit" onclick="submit()" />
    </div>

    <script>
      let upload = {};
      function submit() {
        console.log("here", upload);
        const formData = new FormData();
        formData.append("name", upload.name);
        formData.append("file", upload.data);
        fetch("/submitbinary", {
          method: "POST",
          body: formData,
          headers: {
            // 这里设置了multipart/form-data 会出bug
            // content-type:	multipart/form-data  请求头被设置成了这个，少了Boundary分隔
            // "Content-Type": "multipart/form-data",
            // 注释之后，浏览器会默认有multipart/form-data; boundary=----WebKitFormBoundaryBGM8k7SlRG93biVy
          },
        });
      }
      document.getElementById("file").addEventListener("change", (e) => {
        const files = e.target.files; // 获取文件列表
        console.log(files);
        for (let file of files) {
          upload.data = file; // file 本身就是个blob 可以直接上传的
          upload.name = file.name;
        }
      });
    </script>
  </body>
</html>
